<template>
  <div class="demo-container demo">
    <div @click="$router.back()" class="back">返回</div>
    <h3>Container展示</h3>
    <h4>上中下结构</h4>
    <Container direction="vertical" class="normalContainer">
      <div slot="header" class="header">header</div>
      <div>main</div>
      <div slot="footer" class="footer">footer</div>
    </Container>

    <h4>左右</h4>
    <Container direction="horizontal" class="normalContainer">
      <div slot="header" class="header h100 w150">left</div>
      <div>main</div>
    </Container>

    <h4>上下</h4>
    <Container direction="vertical" class="normalContainer">
      <div slot="header" class="header h100">header</div>
      <Container direction="horizontal">
        <div slot="header" class="header h100 w150">left</div>
        <Container direction="vertical">
          <div>main</div>
          <div slot="footer" class="footer h100">footer</div>
        </Container>
      </Container>
    </Container>

    <h4>左右</h4>
    <Container direction="horizontal" class="normalContainer">
      <div slot="header" class="header h100 w150">left</div>
      <Container direction="vertical">
        <div slot="header" class="header">header</div>
        <div>main</div>
        <div slot="footer" class="footer">footer</div>
      </Container>
    </Container>
  </div>
</template>

<script>
import Container from "@/components/Container";
export default {
  components: {
    Container,
  },
};
</script>

<style scoped>
.demo-container {
  padding: 10px;
}

.normalContainer {
  height: 100px;
  background: skyblue;
}

.header,
.footer {
  background: blueviolet;
}

h4 {
  margin-top: 16px;
}

.h100 {
  height: 100%;
}

.w150 {
  width: 100px;
  background: burlywood;
}
</style>